<template>
  <div class="purchase-details ">
    <!-- 头部信息 -->
    <div class="header">
      <div class="title">
        {{ detailData.purchaseName || '备品备件采购' }}
        <span class="title-right">/低值易耗品及维护工具采购合同</span>
        <div class="tags">
          <el-tag size="small">{{ detailData.purchaseType || '货物' }}</el-tag>
          <el-tag size="small" type="info">{{ detailData.department || '信通第二分公司' }}</el-tag>
        </div>
      </div>
    </div>

    <!-- 概览信息 -->
    <div class="overview">
      <div class="overview-item">
        <div class="label">供应商</div>
        <div class="value">{{ detailData.supplier || '山西汇通泰德建设工程有限公司' }}</div>
      </div>
      <div class="amount-info">
        <div class="amount-item">
          <div class="label">合同金额</div>
          <div class="value">{{ detailData.contractAmount || '60000.00元' }}</div>
        </div>
        <div class="amount-item">
          <div class="label">累计收票金额</div>
          <div class="value">{{ detailData.totalInvoiceAmount || '60000.00元' }}</div>
        </div>
        <div class="amount-item">
          <div class="label">累计付款</div>
          <div class="value">{{ detailData.totalPayment || '60000.00元' }}</div>
        </div>
        <div class="amount-item">
          <div class="label">质保金待支付</div>
          <div class="value">{{ detailData.qualityDeposit || '0元' }}</div>
        </div>
      </div>
    </div>

    <!-- 标签页导航 -->
    <div class="tab-container">
      <el-tabs v-model="activeTab" type="card">
        <el-tab-pane label="招标" name="tender">
          <div class="tender-content">
            <el-form :model="tenderForm" ref="tenderFormRef" :rules="tenderRules">
              <!-- 招标公告信息 -->
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="section">
                    <div class="section-title">招标公告信息</div>
                    <div class="upload-area">
                      <div class="upload-box">
                        <el-form-item label="招标公告" prop="tenderNotice">
                          <file-upload 
                            v-model="tenderForm.tenderNotice" 
                            :limit="3" 
                            tip="最多上传3个文件,单个文件不要超过10M">
                          </file-upload>
                          <!-- <el-upload class="upload-demo" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple :limit="1"
                        :on-exceed="handleExceed">
                        <div class="upload-content">
                          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                          <div class="upload-text">将文件拖到此处，或<em>点击上传</em></div>
                          <div class="upload-tip">支持格式：PDF、Word，单个文件不超过10MB</div>
                        </div>
                      </el-upload> -->
                        </el-form-item>
                      </div>
                      <div class="date-picker">
                        <div class="label">公告发布时间：</div>
                        <el-form-item label="" prop="tenderNoticeTime">
                          <el-date-picker
                            v-model="tenderForm.tenderNoticeTime"
                            type="datetime"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="选择日期时间"
                            style="width: 100%"
                          />
                        </el-form-item>
                      </div>
                    </div>
                  </div>
                </el-col>
                
                <el-col :span="12">
                  <div class="section">
                    <div class="section-title">中标通知书信息</div>
                    <div class="upload-area">
                      <div class="upload-box">
                        <el-form-item label="中标通知书" prop="winBidNotice">
                          <file-upload 
                            v-model="tenderForm.winBidNotice" 
                            :limit="3" 
                            tip="最多上传3个文件,单个文件不要超过10M">
                          </file-upload>
                        </el-form-item>
                      </div>
                      <div class="date-picker">
                        <div class="label">中标时间：</div>
                        <el-form-item label="" prop="winBidTime">
                          <el-date-picker
                            v-model="tenderForm.winBidTime"
                            type="datetime"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="选择日期时间"
                            style="width: 100%"
                          />
                        </el-form-item>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>

              <!-- 投标单位信息 -->
              <div class="section">
                <div class="section-header">
                  <div class="section-title">投标单位信息</div>
                  <el-button type="primary" @click="addBidder">添加投标单位</el-button>
                </div>
                <div class="bidder-form">
                  <el-table :data="tenderForm.purchaseTenderFirmDTOList.filter((item) => item.delFlag !== '1')" border>
                    <el-table-column label="招标单位" prop="company.companyName">
                      <template #default="scope">
                        <el-form-item :prop="'purchaseTenderFirmDTOList.' + scope.$index + '.company.id'" 
                          :rules="[{ required: true, message: '请选择招标单位', trigger: 'change' }]">
                          <GridSelect
                            title="选择招标单位"
                            labelName="companyName"
                            labelValue="id"
                            v-model="scope.row.company.id"
                            :limit="1"
                            :columns="[
                              { prop: 'id', label: '主键' },
                              { prop: 'companyName', label: '单位名称' }
                            ]"
                            :searchs="[
                              { prop: 'id', label: '主键' },
                              { prop: 'companyName', label: '单位名称' }
                            ]"
                            :api="correspondentService">
                          </GridSelect>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="联系人" prop="contactPerson">
                      <template #default="scope">
                        <el-input v-model="scope.row.contactPerson" placeholder="请填写联系人" />
                      </template>
                    </el-table-column>
                    <el-table-column label="联系电话" prop="contactPhone">
                      <template #default="scope">
                        <el-input v-model="scope.row.contactPhone" placeholder="请填写联系电话" />
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100" align="center">
                      <template #default="scope">
                        <el-button type="text" @click="removeBidder(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>

              <!-- 提交按钮 -->
              <div class="form-footer">
                <el-button type="primary" @click="submitTenderForm">保存</el-button>
              </div>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="验收" name="acceptance">
          <PurchaseAcceptanceList />
        </el-tab-pane>
        <el-tab-pane label="收票" name="invoice">
          <PurchaseReceiptList />
        </el-tab-pane>
        <el-tab-pane label="付款" name="payment">
          <PurchasePaymentList />
        </el-tab-pane>
        <el-tab-pane label="质保金" name="deposit">
          <PurchaseDepositList />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { computed } from "vue"
import PurchaseAcceptanceList from "../acceptance/PurchaseAcceptanceList"
import PurchaseReceiptList from "../receipt/PurchaseReceiptList"
import PurchasePaymentList from "../purchasepayment/PurchasePaymentList"
import PurchaseDepositList from "../deposit/PurchaseDepositList"
import GridSelect from '@/components/gridSelect'
// import FileUpload from '@/components/fileUpload'
import purchaseTenderService from '@/api/tender/purchaseTenderService'
import correspondentService from '@/api/correspondent/correspondentService'

export default {
  name: 'PurchaseDetails',
  provide() {
    return {
      contractId: computed(() => this.contractId),
      purchaseId: computed(() => this.purchaseId),
      projectId: computed(() => this.projectId),
    }
  },
  data() {
    return {
      contractId: '',
      purchaseId: '',
      projectId: '',
      detailData: {},
      activeTab: 'tender',
      tenderDate: '',
      winBidDate: '',
      bidderList: [],
      tenderForm: {
        id: '',
        contract: {
          id: ''
        },
        tenderNoticeTime: '',
        tenderNotice: '',
        winBidTime: '',
        winBidNotice: '',
        purchaseTenderFirmDTOList: []
      },
      tenderRules: {
        tenderNoticeTime: [
          { required: true, message: '请选择公告发布时间', trigger: 'change' }
        ],
        tenderNotice: [
          { required: true, message: '请上传招标公告', trigger: 'change' }
        ],
        winBidTime: [
          { required: true, message: '请选择中标时间', trigger: 'change' }
        ],
        winBidNotice: [
          { required: true, message: '请上传中标通知书', trigger: 'change' }
        ]
      },
      correspondentService: correspondentService
    }
  },
  components: {
    PurchaseAcceptanceList,
    PurchaseReceiptList,
    PurchasePaymentList,
    PurchaseDepositList,
    GridSelect
  },
  created() {
    this.contractId = this.$route.query.contractId;
    this.purchaseId = this.$route.query.purchaseId
    this.projectId = this.$route.query.projectId
    if (this.contractId) {
      this.loadTenderData()
    }
  },
  watch: {
    '$route.query': {
      handler(newQuery) {
        this.contractId = newQuery.id
      },
      immediate: true
    }
  },
  methods: {
    loadTenderData() {
      purchaseTenderService.queryById(this.contractId).then((data) => {
        if (data) {
          this.tenderForm = this.recover(this.tenderForm, data)
        }
      })
    },
    addBidder() {
      this.tenderForm.purchaseTenderFirmDTOList.push({
        company: {
          id: ''
        },
        contactPerson: '',
        contactPhone: '',
        delFlag: '0'
      })
    },
    removeBidder(row) {
      if (row.id) {
        row.delFlag = '1'
      } else {
        const index = this.tenderForm.purchaseTenderFirmDTOList.indexOf(row)
        this.tenderForm.purchaseTenderFirmDTOList.splice(index, 1)
      }
    },
    submitTenderForm() {
      this.$refs.tenderFormRef.validate((valid) => {
        if (valid) {
          this.tenderForm.contract.id = this.contractId
          purchaseTenderService.save(this.tenderForm).then((data) => {
            this.$message.success(data)
            this.loadTenderData() // 重新加载数据
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.none-sizing {
  padding: 0;
  margin: 0;
}
.purchase-details {
  padding: 20px;
  background: #fff;

  .header {
    margin-bottom: 20px;

    .title {
      font-size: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
      .title-right{
        font-size: 16px;
      }

      .tags {
        display: flex;
        gap: 8px;
      }
    }
  }

  .overview {
    background: #f5f7fa;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    display: flex;
    gap: 40px;

    .overview-item {
      flex: 0 0 200px;

      .label {
        color: #909399;
        margin-bottom: 8px;
      }

      .value {
        font-size: 16px;
        font-weight: 500;
      }
    }

    .amount-info {
      flex: 1;
      display: flex;
      gap: 40px;

      .amount-item {
        .label {
          color: #909399;
          margin-bottom: 8px;
        }

        .value {
          font-size: 16px;
          font-weight: 500;
        }
      }
    }
  }

  .tab-container {
    .tender-content {
      padding: 20px 0;

      .section {
        padding:0 20px ;
        margin-bottom: 30px;

        .section-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;
        }

        .section-title {
          font-size: 16px;
          font-weight: 500;
          margin-bottom: 15px;
        }

        .upload-area {
          align-items: flex-start;

          .upload-box {
            flex: 1;
          }

          .date-picker {
            display: flex;
            align-items: center;
            gap: 10px;
          }
        }
      }
    }
  }

  :deep(.upload-demo) {
    .upload-content {
      padding: 20px;
      text-align: center;

      .el-icon--upload {
        font-size: 24px;
        color: #409eff;
        margin-bottom: 10px;
      }

      .upload-text {
        margin-bottom: 8px;
        em {
          color: #409eff;
          font-style: normal;
        }
      }

      .upload-tip {
        color: #909399;
        font-size: 12px;
      }
    }
  }

  .form-footer {
    text-align: center;
    margin-top: 20px;
    padding: 20px 0;
  }

  :deep(.el-form-item) {
    margin-bottom: 18px;
  }

  .section {
    .upload-area {
      display: flex;
      gap: 20px;
      
      .upload-box {
        flex: 1;
      }
      
      .date-picker {
        width: 300px;
      }
    }
  }
}
</style>
